Make your own free website on Tripod.com

How To Make an Otaku Mascot

By XFox Prower

So you want to make a mascot? This page will explain how to in detail, but before we start, let's see what programs are recommended, needed, and the reason's for using them. Feel free to use other programs that can do the job listed in the Task column.

Recommended Utilities
UtilityTaskWhere to get it
Otaku Mascot ViewerThe easy to use mascot createrhttp://www.atoys.com
Animagic32Multiple frame croppinghttp://www.rtlsoft.com
Pictview 1.95 (DOS)Counting colors, bpp cropping, file conversion. Can view and convert between over 140 different graphics formats, new and oldhttp://www.PictView.com
PV 2.78zoom factors (optional)http://www.multimediaware.com/pv
Windows NotepadTaking notes, scrap file, other junkWindows comes with it
Windows PaintCopying, pasting, height/width adjustingWindows comes with it

There are a few steps to making your mascot. First, we must know who or what we want to make. I recommend you rip them from games. If you were to modify each frame with your customizations and art, that may take a really long time.

  1. Getting pics for your Mascot.
  2. Preparing each frame
  3. Organizing the colors
  4. Loading images into the Mascot Viewer
  5. Looping
  6. Click-Only Animations and Sound


1. Getting pics for your mascot

To get pics for your mascot, there are several ways. I'll explain how to do this easy with some commonly used emulators that specialize in it. Let's assume you want to make your mascot from an animation that happens when you are standing still for these examples. Also, for whatever emulator you use, set the frame rate to skip 0 frames. It may be slow, but if you want a clean animation and perfection, you'll want to.

Genecyst:
From the menus, go to view/layers. Disable
'Scroll B low', 'Scroll A low', and 'Scroll A high'.
These are the background layers. You should be left with your character and a black screen. Move your character somewhere away from enemies and danger. You want to get the animation from the beginning, so jump or something to interrupt it. Just before you land (just before your animation starts), Pause the emulator (not the game). Do that with Alt+P. While the emu is paused, you can use some special options such as frame advancing. Press Alt+A to advance each frame as if slowmotion at your pace. Do this until the start of your animation begins. When you see a pic you want, press F9 to capture the entire screen to a file. the files will increment in number starting at snap000.pcx, snap001.pcx, etc. Follow a pattern of taking snaps and incrementing the frames. Sometimes, each movement of your character may go every 4 frames, so you are less likely to mess up. But try to stay coordinated, since you may be taking 100+ pics in one go. You must do it all in one go. The reason is because we want our character in the same spot as before, not closer to the edge of the screen.

Zsnes:
In whatever game you pick, go someplace away from danger. Disable all the background layers. Do that by pressing 1, 2, 3, and 4. Be sure that 5 is left on. You should have a black background with just you. Wait a moment for the messages on the screen to go away since they do appear in snapshots (transparent or not). Press F1 to access the popup menu. There are 2 options: Incr frame only for advancing each frame, and snapshot / incr frame for taking a snapshot and then increasing the frame. On games like FF5, your character is always centered on the screen (the map moves, not you) and the popup menu gets in the way even if you select 'Move this window'. For cases like that, you may have to repeatedly do Snap / incr frame. You won't miss anything that way, but you'll probably have to take over a thousand pics if it is doing 60 frames per second (I won't verify that -_-!).

Visual Boy Advance
Our 3rd example is an emulator that has an annoying prompt per screenshot asking for a name and file type for each. It can save as PNG and BMP. The default is PNG and if you want BMP, you'll have to change it for each snapshot. Chances are, you'll forget, and be left with a format that you cannot open with Paint. But you can use Pictview to convert it to a BMP. You can also press Alt+Prt Scrn to take a snap of the entire emulator window (that's a Windows feature and should work with anything except some fullscreen games and DVDs) Also, you cannot disable backgrounds with this emulator, so try to find a simple background to stand by such as a wall that has no pattern or detail. Make sure that the screen size is set to 1x1 pixels. If it is 2x2, you can use PV (Do not confuse this with Pictview!) to convert an image with a 50% zoom factor. But for so many snaps, save yourself the work and don't make the mistake. You can always do a 200% zoom later if you want anyway. Note for the wise: Do not use Snes9x for this. It's screen stretching ruins everything. It can have 2x2 pixels and for every third line, a 2x3 and it ruins everything. Zsnes takes clean 1x1 images nomatter what resolution you are using (it does this with each snapshot automatically).

End of Step 1. You should now have several pics for your mascot


2. Preparing each frame

Move all your snapshots to a new folder. This will be your work folder, but name it as you wish. I recommend you make a copy of it too. Open Animagic and open all of your images at once (they should all be in abc order due to the #s in the names). It should make an animated gif of all your snapshots. Make sure that there are less than 256 colors used in the total amount of colors or the gif will lose colors (don't worry, mascots don't have a 256 color limit. They do have a 320x240 per frame limit though). View the palette from the view menu to check this.

Now that all of your frames are loaded, it's time to crop them. Some images may be bigger than others on 1 side. For example, Tails' tails take up different amounts of space on the screen when they are extended behind him than on some frames where they are sticking up. Go to frames/crop. Click on 'select all' and your image should have a dotted line around it. Adjust each control to move the line closer to your mascot. We want to cut out some of the background. Don't come too close to your mascot. It may look safe to do so in the displayed frame, but you may be cutting out something in another frame. Just do a little bit of a crop so you have plenty of room around him but have eliminated alot of the background. Now that the image is smaller, we can zoom in and get more detail. Zoom in as far as you can without getting scrollbars. Look at all of your frames and find which one comes closest to the left side of the screen. With that frame displayed, crop again. Crop as close to this end as possible (this is easier with the zoom). Don't worry about other images having space to spare on the left edge of them, they must be able to line up with this image since it is longer there. Find the image with the tallest part of your sprite and do this step again. It is very important that each frame lines up with the left and top sides since a mascot is drawn from left to right and top to bottom when displayed. You can crop the bottom and right sides of every frame as far as they'll go even if they are of varying sizes without having to worry. Don't make any transparent colors since we'll be converting each frame back to bmp later. Make a new folder in your work folder. Save the gif there. Then select file/save frames to save each frame of the gif to a new gif in that folder. (anim00.gif, anim01.gif, etc.)


Alternative Step 2. (for those with problems with Animagic)

If you don't have Animagic or have problems with it (like me), then do this step. Also, you don't have to worry about keeping your colors to 256 if you do it this way. Read the original first though, so you get the idea. Open the first frame in Paint. I've seen Paint on some computers that cannot open GIF or PCX files, but I've only seen that problem on Windows 95 and 2000. Windows 98 SE works fine. Use pictview to convert to BMP if you need to. Since you have a black background on your screenshots (if you were able to disable backgrounds on your emulator), then you should fill the blackness with a color that stands out more. I'd use dark pink or dark green for this since it's not too white, not too black, and most likely not even close to any colors on your mascot. Your mascot should now be clearly and easily visible. There may be a black outline (but not totally black) around him that was not easily seen with that black background, so that's important. Next, zoom in to about 800% or as far as you can while keeping your mascot on screen. Use the dotted line thinie to select your mascot. Copy him. Change your height and width with Alt+E to 1x1. Paste your pic. Windows will ask if you want the screen resized (due to it being too small). Say yes and it will be perfectly sized for your pic. You may repeat this until this image is cropped perfectly. Also, remember how the background was black? When you filled it to pink, it only did the outside. there may be a spot was also ment to be part of the background. For example: There's a spot between S3 Tails' hair that doesn't touch outside to be changed, but is isn't meant to be 'black' or dark pink' . Change it to the same color as the background. NOTE: The first pixel (coordinates 0,0 or the top left corner) is the color that will be the transparent color when the mascot is made. That is the background. With all that done, save the image as something like frame001.bmp. Make sure it's a 24-bit bmp, because we all know that Paint loves to ruin the quality of 8-bit pictures by using a fixed 256 color palette (the vga one?) We'll fix the colors later. Open your next frame and repeat the process. Leave your previous pic open for each new one you do. This way you can see if there's a problem with lining them up. If a wide image moves everything to the right, you must adjust all the other images to be shifted to the right just as much or it won't look right. To do that, press Alt+E and adjust the width to that of the wide pic. You'll have some white space on the right. Press Alt+A to select your entire pic and drag it to the right so the white space will be on the left (your pic shifted to the right). Here's an example below of 2 images with varying width.
WrongRight
 
 
These pics were from the work folder of my 'Sonic Advance Tails'. Notice in the 'Right' column that his hair and shoes line up exactly, but his tails don't; they're not supposed to. Notice how on the pics in the 'Wrong' column it Tails doesn't line up correctly. That's what you'll see in the viewer if you don't fix it. The only difference from the 2nd 'Wrong' and 'Right' pics are that the right one has the image shifted to the right and the black area to the left in order to align him.

If you make the width of an image longer, fill in the white area after you drag your image so it matches your background color. Remember that you'll have to take the height into consideration and do this again if one image is taller than the others when cropped.

End of Steps 2. At the end of these steps, you should have all of your images cropped and shifted to be properly lined up and viewed.

3. Organizing The Colors

It's almost time to load the pictures into the Mascot Viewer (the editor). But first, we must (for performance sake) make each pic have the correct amount of colors. We saved them all as 24-bit (1.6 million colors). Make a copy of the folder that has all of your cropped pics. Here's where pictview comes in. Open Pictview and go to the directory that has all of your cropped images. On any image, press F8 and select Count used colors. This will count how many colors are actually used in your picture. Press esc to return and press F8 again. This time, select Reduce Number Of Colors. Round up to the closest power of 2 with the amount of colors actually used. Example: 12 colors rounds up to 16, 32 colors is just 32, and 33 colors rounds up to 64. Count and reduce each of your other images one at a time. Make sure that Compress 256 color BMP files is disabled in the options screen (F7) If you get a message saying "cannot find cfgpv.exe", then don't worry. It's disabled by default. I don't know if the Mascot Viewer likes compressed images. (some programs don't). Mascot viewer can also open LBM files (Pictview can convert images to it) but Pictview by default compresses LBM files. Convert all of your truecolor BMP files to the lowest color of Windows BMP format (Don't use OS/2). If you backed up this folder, feel free to overrite them.

End of Step 3. All your cropped images should have the appropriate amount of colors and saved as Windows BMP.

4. Loading images into the Mascot Viewer

Open the Mascot Viewer. Observe the mascot for awhile. (It came with 2, and they seem to get pretty pissed when you click on them, if that gives you any ideas). Right click the mascot or the icon in the taskbar and select Create Mascot You should see a menu of mascot creating stuff. Give it a name in the name field and you can also fill in the creator info. Select Add Frame and load your first image. It should display on top of the screen. If your mascot should be sitting and hanging over the window, play with the offset by the name. Set the Delay for the amount of milliseconds you want them to be viewed. 60 works most of the time. 60/60 (min/max) shows that frame for 60 seconds every time. 60/80 pics a random amount between 60 and 80 Delay. Leave the loop part alone for now. Load all of your images in. If you named them with numbers at the end starting at 01 or 001 if you have so many, then they will match the frame No. You can click each frame (while stopped) to see that frame. This is useful for finding identical images. When a frame is selected, it's button is pressed to show it is active. If you select Add Frame while a frame is active, the frame will be inserted in front of the active frame. Make sure that all of your frames line up correctly. Click around frame by frame making sure not to notice the slightest jump. If they don't line up correct, review step 2 about shifting the height and width. Test your mascot for bugs and shifting. When you have gotten all of them out, continue on. Whenever you make a change to an image, reload it into the viewer. Also, please be aware that the work files load every frame from their original location, so you shouldn't rename them. or delete your old images that you loaded into the work file.

End of Step 4. You should have all of your images loaded into the viewer and have a good feel of the program.

5. Looping

This is the hardest part of all if you want it done correctly, but it is optional. Before you start this, save your work file. and publish it if you wish. look through your frames 1 at a time from it's start. (click stop if it is moving on its own.) Try to catch duplicate images by clickinging them. Take notes, since this part is critical. Open Notepad and keep track of it in any way you can remember. I keep it like this:

frame = file
001   = m001.bmp
002   = m002.bmp
003   = m003.bmp
004   = m004.bmp
005   = m005.bmp
006   = m006.bmp

There are no rules to the notes. There's no format. It can be the messiest thing on Mobius and no one will care. What matters is that it is understandable by you. Though, I encourage you to make it look like a draft of the frames screen. If you find out that m006.bmp is identical to m001.bmp (frame 1 = frame 6), then load m001.bmp for frame 6. This may (but I'm not certain) improve file size by using the same image. In that example, your screen may look like this.

001   = m001.bmp
002   = m002.bmp
003   = m003.bmp
004   = m004.bmp
005   = m005.bmp
006   = m001.bmp

Lets say you kept going and had 11 frames, but found that the first 10 frames were just a repeat of the first five frames. For this, you set a loop on frame 5. Set the Next on frame 5 to go to 1. Then set the min and max to 1. This will tell the viewer to play the first 5, frame 5 will tell it to jump to frame 1 1 time. After that 1 loop, frame 5 will let you go on to frame 6 (you may have it named m011.bmp, but it doesn't matter). To separate confusing loop areas, Mascot Viewer changes the background from red to green after the loop point. There are many other colors, I've never ran out, nor have I any doubt that I will, so it's a really cool feature of the program. Just like with the Delay, you can specify the Min and Max amount of times to loop. This can be useful to randomize an amount of times a mascot blinks his eyes. Try to simplify each duplicate image and loop as much as you can. It will make the mascot unbelievably small for the effort.

End of Step 5. Your mascot should be pretty well looped where necessary.

6. Click-only animations and sound

Click-only frames are frames that are only shown when you click the mascot. It should be something interactive since it's you getting his attention. Often, it's some kind of dirty look or something, possibly because they don't know where you intend to stick that arrow. ^_^. To add click-only frames, just add them like any other frames. But set the last frame of the viewable frames to jump to 1 and set the min and max to 0 (meaning always jump to frame 1). This will prevent your click-only frames added beyond there from being viewed.
For example: Frame 50 may be your last viewable frame. Set its loop to 1/0/0. If you want to add a 5 frame click-only animation, add them. Then click above where it says Click Animation Active. For the range, put 51 to 55 since you added 5 images. Once the range of click-only frames are entered, those frames will have a gray background on the frame screen, similar to how the looping changed the menu colors between looping areas. You may also add a WAV file that will when you click the mascot, but often the WAV is 3 times bigger than the actual Mascot. When you are finished, it's time to publish. Publishing your Mascot converts all of your images, creator info, delay, looping, and sound to a single file. You cannot open a published mascot to work on but you can with the work files.

End of Step 6. Congratulations.

That's the end of the tutorial. I hope it covered everything and was clear and understandable. If it wasn't, e-mail me with questions or find me on Aim for live assistance.

Back To Other
Home